<script setup>
import { useDictionary } from '@/use/use-dictionary'

const dict = useDictionary([
  'task_risk_status',
  'task_risk_category',
  'task_risk_severity',
  'task_risk_probability',
  'task_risk_change_type',
])

const props = defineProps({
  solutionData: Array,
  default: () => [],
  projectMemberList: {
    type: Array,
  },
})

function filterKey(i) {
  if (i.key === '风险类别') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_risk_category' })
  } else if (i.key === '风险状态') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_risk_status' })
  } else if (i.key === '严重程度') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_risk_severity' })
  } else if (i.key === '发生概率') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_risk_probability' })
  } else if (i.key === '风险变更类型') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_risk_change_type' })
  } else if (i.key === '确认人' || i.key === '创建人' || i.key === '修改人') {
    filterLabel({ data: i, type: 'user' })
  }
}

function filterLabel(config) {
  const { data, type, dictType } = config
  if (type === 'dict') {
    data.after = dict.translate(dictType, data.after)
    data.before = dict.translate(dictType, data.before)
  } else if (type === 'user') {
    let after = props.projectMemberList.find((item) => item.userId === parseInt(data.after))
    let before = props.projectMemberList.find((item) => item.userId === parseInt(data.before))
    data.after = after?.nickName
    data.before = before?.nickName
  }
}

function getViewHtml(data) {
  if (data) {
    const getText = data
      .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
      .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
      .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
      .replace(/<[^<br/>]+>/g, '')
      .trim()
    return getText ? data : '<span>空</span>'
  } else {
    return '<span>空</span>'
  }
}
</script>

<template>
  <el-timeline class="timeline-wrapper" :color="hex">
    <el-timeline-item v-for="(item, index) in solutionData" :key="index">
      <template #dot>
        <div :class="[item.isChild ? 'timeline-dot-child' : 'timeline-dot']"></div>
      </template>
      <div class="timeline-date">
        <span>
          {{ item.createTime }}
        </span>
      </div>
      <div class="timeline-content">
        <div class="timeline-content-child">
          <div v-for="(item, index) in JSON.parse(item.changeData)" :key="index">
            <div>{{ filterKey(item) }}</div>
            <span class="timeline-content-value">{{ item.key + '：' }}</span>
            <span style="margin-left: 10px">{{ item.before || '空' }} - ></span>
            <span style="margin-left: 10px">{{ item.after || '空' }}</span>
          </div>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<style scoped lang="scss">
.dynamic {
  position: relative;
  word-break: break-all;
  padding: 5px;
  margin: 0;
  li {
    list-style: none;
    padding-top: 10px;
    .dynamic-date {
      color: var(--elp-text-color-placeholder);
    }
    .dynamic-section {
      padding: 5px;
      .section-user-name {
        @include use-flex(center, normal, row);
        .icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #758406;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          margin-right: 5px;
        }
        .name {
          padding-left: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .section-content {
        padding-left: 20px;
        margin-top: 0;
        .item-content {
          padding-left: 20px;
        }
        .item-summary {
          padding: 10px 0 0 12px;
          @include use-flex(normal, normal, row);
          span {
            margin-right: 5px;
          }
          .item-date {
            color: var(--elp-text-color-placeholder);
            font-size: 12px;
          }
        }
      }
    }
  }
}

.timeline-wrapper {
  :deep(.elp-timeline-item) {
    margin-left: 60px;
  }

  :deep(.elp-timeline-item__dot) {
    left: -3px;
  }
  .timeline-dot {
    width: 16px;
    height: 16px;
    background-color: #005fff;
    border-radius: 50%;
    border: 3px solid #bdd6ff;
  }
  .timeline-date {
    width: 90px;
    position: absolute;
    left: -100px;
    text-align: right;
    &-parent {
      font-size: 16px;
      color: #777c85;
      line-height: 24px;
      font-weight: 500;
    }
  }
  .timeline-content {
    font-size: 14px;
    line-height: 21px;
    &-severity {
      font-weight: 700;
      color: #141414;
    }
    &-status {
      color: #141414;
      flex: 1;
    }
    &-probability {
      color: #141414;
      flex: 1;
    }
    &-solutions {
      color: #141414;
    }
  }
}
</style>
